import React, { FC, useEffect, useState } from 'react'
import { Card } from 'antd'
import { useTranslation } from 'react-i18next'
import { getRecommendList } from '@/api/article'
import { useNavigate } from 'react-router-dom'
import { DetailsItem } from '@/utils/index'
import style from './search.module.scss'

const Recommend: FC = () => {
  const navigate = useNavigate()
  const [list, setList] = useState([])
  useEffect(() => {
    getRecommendList()
      .then(({ data }) => {
        setList(data.data)
      })
      .catch((err) => {
        console.log(err)
      })
  }, [])
  const { t } = useTranslation()
  return (
    <div>
      <div className="mb10">
        <Card
          className={style.card}
          size="small"
          title={<p>{t('recommend')}</p>}
        >
          {list.map((item: DetailsItem) => {
            return (
              <p
                key={item.id}
                onClick={() => navigate('/details/' + item.id, { state: item })}
              >
                {item.title}
              </p>
            )
          })}
        </Card>
      </div>
    </div>
  )
}

export default Recommend
